<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易QQ表情点击游戏</title>
		<style type="text/css">
			body, h2, h3, p, ul, input{
				margin: 0;
				padding: 0;
			}
			input{
				border: none;
				background: none;
			}
			img{
				border: none;
				vertical-align: top;
			}
			strong{
				font-weight: normal;
			}
			em{
				font-style: normal;
			}
			#box{
				margin: 100px auto;
				font-family: lantinghei SC,simsun,微软雅黑;
				width: 800px;
				text-align: center;
			}
			h2{
				font-size: 24px;
				line-height: 40px;
			}
			h3{
				font-size: 20px;
				line-height: 30px;
				color: #00BFFF;
			}
			p{
				line-height: 30px;
			}
			input{
				margin-top: 6px;
				font-size: 16px;
				font-family: lantinghei SC,simsun,微软雅黑;
				padding: 4px 10px;
				color: red;
				background: #000;
				opacity: 1;
				filter: alpha(opacity:100);
				cursor: pointer;
				outline: none;
			}
			#gameArea{
				height: 400px;
				margin: 14px;
				border: 2px solid #000;
				position: relative;
				top: 0;
				overflow: hidden;
				cursor: pointer;
			}
			#gameArea img{
				position: relative;
				left: 0; /*-376px~376px*/
				top: -24px; /*-24px~376px*/
				cursor: pointer;
			}
			.score{
				font-size: 0;
				position: relative;
			}
			.score li{
				list-style: none;
				background: #000;
				width: 100px;
				color: #fff;
				font-size: 16px;
				margin: 0 2px;
				position: absolute;
				text-align: left;
				text-indent: 1em;
				overflow: hidden;
				vertical-align: top;
				opacity: 1;
				filter: alpha(opacity:100);
			}
			#table{
				position: absolute;
				right: -190px;
				top: -418px;
				width: 200px;
				height: 400px;
				font-weight: normal;
				text-align: center;
				background: #ccc;
				text-indent: 0;
				overflow: auto;
				border: 2px solid #424242;
			}
			#tabTitle, #table li{
				width: 200px;
				margin: 0;
				height: 24px;
				line-height: 24px;
				position: relative;
				background: #FECC5B;
			}
			#tabTitle:after, #table li:after{
				content: "";
				display: block;
				clear: both;
			}
			#tabTitle strong, #table li em{
				float: left;
				width: 100px;
				color: #000;
			}
			#table li{
				border-top: 1px solid #fff;
				text-align: center;
				display: block;
				text-indent: 0;
			}
			span{
				position: absolute;
				left: 0;
				top: 0;
				color: red;
			}
			#mask{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(0,0,0,0.5);
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
				text-align: center;
				display: none;
			}
			#mask div{
				position: relative;
				top: 40%;
			}
			#mask p{
				font-size: 40px;
				font-weight: bold;
				line-height: 50px;
				margin-bottom: 20px;
				color: #EF9400;
			}
		</style>
		<script type="text/javascript" src="codefine.js"></script>
		<script type="text/javascript">
			$(function (){
				
				var aUrl = [];
				for (var i=1; i<11; i++) {
					aUrl.push('img/'+i+'.png');
				}
				
				var oBox = $('#box');
				var oInp = $('@input',oBox)[0];
				var oImg = $('@img',oBox)[0];
				var oGame = $('#gameArea');
				var aSpan = $('@span',oBox);
				var oMask = $('#mask');
				var oP = $('@p',oMask)[0];
				var oEnt = $('@input',oMask)[0];
				var aSco = $('@li');
				var oUl = $('@ul',$('#table'))[0];
				var score = 0;
				var lost = 0;
				var speed = 1;
				var onOff = true;
				var timer = null;
				
				//初始化
				aSco[0].style.left = 298 + 'px';
				aSco[1].style.left = 402 + 'px';
				scoreReset();
				blink(oInp);
				
				//点击按钮开始游戏
				oInp.onclick = function (){
					if (onOff) {
						lost = 0;
						score = 0;
						speed = 1;
						start();
						onOff = false;
						opacity(oInp,20,50);
						oInp.value = '光速打脸中...';
					}	
				};
				
				//点击图片得分
				oImg.onclick = function (){
					clearInterval(oImg.timer);
					score ++;
					scoreScroll('score');
					speed ++;
					oImg.src = 'img/qq.png';
					shake(oImg,'left',function (){
						oImg.style.top = -24 + 'px';
						start();
					});
				};
				
				//得分初始化
				function scoreReset(){
					for (var i=0; i<aSpan.length; i++) {
						aSpan[i].innerHTML = '00';
						aSpan[i].style.left = 50 + 'px';
					}
					aSpan[1].style.top = 20 + 'px'; 
					aSpan[3].style.top = 20 + 'px';
				}
				
				//分数滚动
				function scoreScroll(indexStr){
					var a = 0;
					var b = 0;
					var attr = null;
					switch (indexStr) {
						case 'score':
							a = 2;
							b = 3;
							attr = score;
							break;
						default:
							a = 0;
							b = 1;
							attr = lost;
					}
					aSpan[b].innerHTML = attr<10 ? '0'+attr : ''+attr;
					doMove(aSpan[a],'top',2,-20);
					doMove(aSpan[b],'top',2,0,function (){
						aSpan[a].style.top = 0;
						aSpan[b].style.top = 20 + 'px';
						aSpan[a].innerHTML = attr<10 ? '0'+attr : ''+attr;
					});
				}
				
				//闪烁按钮
				function blink(obj){
					opacity(obj,10,20,function (){
						opacity(obj,10,100,function (){
							blink(obj);
						});
					});
				}
				
				//游戏主程序
				function start(){
					if (lost==10) return;
					oImg.src = aUrl[randomInt(0,aUrl.length-1)];
					oImg.style.left = randomInt(-376,376) + 'px';
					doMove(oImg,'top',speed,376,function (){
						if (getStyle(oImg,'top','number')==376) {
							shake(oGame,'top',function (){
								lost ++;
								scoreScroll('lost');
								oImg.style.top = -24 + 'px';
								if (lost==10) {
									tip(score);
								}
								start();
							});
						}
					});
				}
				
				//游戏结束后的提示面板
				function tip(score){
					var str = '';
					var val = '';
					var rev = '';
					if (score>=10) {
						str = '开挂了吧？单身30年的手速啊！'; 
						val = '哥玩的是寂寞!';
						rev = '真麒麟臂';
					} else if (score>4&&score<10) {
						str = '呵呵，才'+score+'分，脸有点肿吧！不服?再战？';
						val = '干干干!';
						rev = '红肿不堪';
					} else {
						str = '我是谁？我脸为何这么肿？我手为何这么残？';
						val = '无奈认命？';
						rev = '蓝瘦香菇';
					}
					oMask.style.display = 'block';
					oP.innerHTML = str;
					oEnt.value = val;
					blink(oEnt);
					oInp.value = '脸肿又如何，不怂就是干!';
					oEnt.onclick = function (){
						oMask.style.display = 'none';
						opacity(aSco[0],10,0);
						opacity(aSco[1],10,0,function (){
							oUl.innerHTML = '<li><em>'+(score<10?'0'+score:''+score)+'</em><em>'+rev+'</em></li>' + oUl.innerHTML;
						});
						doMove(aSco[0],'left',10,0);
						doMove(aSco[1],'left',10,800,function (){
							aSco[0].style.left = 298 + 'px';
							aSco[1].style.left = 402 + 'px';
							opacity(aSco[0],10,100);
							opacity(aSco[1],10,100);
							onOff = true;
							scoreReset();
							blink(oInp);
						});
					};
				}
				
			})
		</script>
	</head>
	<body>
		<div id="box">
			<h2>听说你手速飞快？呵呵，过了10分再说吧!</h2>
			<h3>那一天...人类又想起了被QQ表情所支配的恐惧...</h3>
			<p>规则：用鼠标点击落下的qq表情，命中得1分，未命中失1分。失分达到10分后。。。</p>
			<input type="button" value="少废话，走你!">
			<div id="gameArea" onselectstart="return false;" style="-moz-user-select:none;">
				<img src="" alt="" />
			</div>
			<ul class="score">
				<li>失分：<span></span><span></span></li>
				<li>得分：<span></span><span></span></li>
				<li id="table">
					<div id="tabTitle">
						<strong>历史得分</strong>
						<strong>战况</strong>
					</div>
					<ul></ul>
				</li>
			</ul>
		</div>
		<div id="mask">
			<div>
				<p></p>
				<input type="button" value=""/>
			</div>
		</div>
	</body>
</html>
